<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>工程师界面</title>
<style type="text/css">
#allmap {
	width: 100%;
	height: 800px;
	overflow: hidden;
	margin: 0;
	font-family: "微软雅黑";
}

.ef_menu {
	border: 1px;
	border-color: gray;
	border-style: solid;
	position: fixed;
	border-radius: 5px;
}

.ef_menu_engineer {
	width: 45px;
	height: 45px;
	right: 20px;
	bottom: 20px;
	background-color: white;
}

.ef_menu_list {
	width: 45px;
	height: 45px;
	right: 20px;
	bottom: 80px;
	background-color: white;
}

.bs_dialog {
	position: fixed;
	top: 40%;
}
</style>

<!-- jquery -->
<script type="text/javascript" src="./resource/js/jquery-1.11.3.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
	integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
	crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	crossorigin="anonymous"></script>

<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=B12a3d27a745329b775ec7c97099799d">
	//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
	//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
</head>
<body>

	<div id="allmap"></div>
	<!-- 订单记录 -->
	<div class="ef_menu ef_menu_list">
		<input type="image" src="./resource/image/fix_menu.png" width="100%"
			height="100%" onclick="showOrderRecords()" />
	</div>
	<!-- 工程师信息 -->
	<div class="ef_menu ef_menu_engineer">
		<input type="image" src="./resource/image/engineer_info.png"
			width="100%" height="100%" onclick="showEngineerInfo()" />
	</div>
	<!-- bootstrp dialog -->
	<!-- 订单模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1"
		style="display: none" role="dialog" aria-labelledby="myModalLabel"
		aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" aria-hidden="true"
						onclick="cancelOrder()">&times;</button>
					<h5 class="modal-title" id="myModalLabel">您接收一条工单信息</h5>
				</div>
				<div class="modal-body"></div>
				<div class="modal-footer">
					<!--
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					 -->
					<button type="button" class="btn btn-primary"
						onclick="confirmOrder()">确定</button>
					<a href="javascript:void(0)" onclick="cancelOrder()">关闭</a>
				</div>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal -->
	<!-- /订单模态框（Modal） -->

	<!-- 订单记录（Modal） -->
	<div class="modal fade" id="orderRecordsModal" tabindex="-1"
		style="display: none" role="dialog" aria-labelledby="myModalLabel"
		aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h5 class="modal-title" id="myModalLabel">工单记录(138)</h5>
				</div>
				<div class="modal-body">
					<ul class="list-group">
						<li class="list-group-item"><span class="badge">新</span> 李先生
							1897*** 广东省汕头市澄海区莲下镇大街18号</li>
						<li class="list-group-item">王先生 1397*** 广东省汕头市澄海区莲下镇大街18号</li>
						<li class="list-group-item">陈小姐 197*** 广东省汕头市澄海区莲下镇大街18号</li>
						<li class="list-group-item">陈长生 1897*** 广东省汕头市澄海区莲下镇大街18号</li>
						<li class="list-group-item">老王 13697*** 广东省汕头市澄海区莲下镇大街18号</li>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal -->
	<!-- /订单记录（Modal）test4 -->

	<!-- 工程师信息 -->
	<div class="modal fade" id="engineerInfo" tabindex="-1"
		style="display: none" role="dialog" aria-labelledby="myModalLabel"
		aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h5 class="modal-title" id="myModalLabel">个人信息</h5>
				</div>
				<div class="modal-body">
					<h4>名字:E修哥No。1</h4>
					<img src="./resource/image/user8-128x128.jpg">
					<p>
						 Alexander
						Pierce I would like to meet you to discuss the latest news about
						the arrival of the new theme. They say it is going to be one the
						best themes on the market
					</p>
				</div>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal -->

	<!-- /工程师信息 -->

	<!-- /bootstrp dialog -->
</body>
<script type="text/javascript">
	var map = new BMap.Map("allmap"); // 创建地图实例
	var point = new BMap.Point(113.317, 23.1209); // 创建点坐标
	map.centerAndZoom(point, 14); // 初始化地图，设置中心点坐标和地图级别
	map.enableScrollWheelZoom();

	var bpoint;
	//获取当前位置
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r) {
		if (this.getStatus() == BMAP_STATUS_SUCCESS) {
			bpoint = r.point;
			var mk = new BMap.Marker(r.point);
			map.addOverlay(mk);
			map.panTo(r.point);
			//alert('您的位置：'+r.point.lng+','+r.point.lat);
			//diy_marker();
		} else {
			alert('failed' + this.getStatus());
		}
	}, {
		enableHighAccuracy : true
	});

	//添加定位控件
	var geolocationControl = new BMap.GeolocationControl();
	geolocationControl.addEventListener("locationSuccess", function(e) {
		// 定位成功事件
		var address = '';
		address += e.addressComponent.province;
		address += e.addressComponent.city;
		address += e.addressComponent.district;
		address += e.addressComponent.street;
		address += e.addressComponent.streetNumber;
		alert("当前定位地址为：" + address);
	});
	geolocationControl.addEventListener("locationError", function(e) {
		// 定位失败事件
		alert(e.message);
	});
	map.addControl(geolocationControl);

	//规划路线
	var walking = new BMap.WalkingRoute(map, {
		renderOptions : {
			map : map,
			autoViewport : true
		}
	});

	$(function() {
		setInterval(diy_marker, 15000);
	});

	var gcs_pt;//客户坐标
	var marker2;//客户标记
	//自定义标记
	function diy_marker() {
		var bounds = map.getBounds();
		var sw = bounds.getSouthWest();
		var ne = bounds.getNorthEast();
		var lngSpan = Math.abs(sw.lng - ne.lng);
		var latSpan = Math.abs(ne.lat - sw.lat);
		for (i = 0; i < 1; i++) {
			//自定图标
			gcs_pt = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7),
					ne.lat - latSpan * (Math.random() * 0.7));
			var myIcon = new BMap.Icon("./resource/image/1.png", new BMap.Size(
					50, 60));
			marker2 = new BMap.Marker(gcs_pt, {
				icon : myIcon
			}); // 创 建标注
			map.addOverlay(marker2);//添加到地图中
			//获取覆盖物信息
			marker2.addEventListener("click", getAddress);
			recOrder();
		}
	}

	function getAddress(e) {//获取客户地址
		var geoc = new BMap.Geocoder();//地址解析
		var pt = e.target.point;
		geoc.getLocation(pt, function(rs) {
			var addComp = rs.addressComponents;
			alert(addComp.province + ", " + addComp.city + ", "
					+ addComp.district + ", " + addComp.street + ", "
					+ addComp.streetNumber);
		});
	}

	function recOrder() {//接收订单
		var geoc = new BMap.Geocoder();//地址解析
		geoc.getLocation(gcs_pt, function(rs) {
			var addComp = rs.addressComponents;
			var add = "客户:李先生<br/>地址:" + addComp.province + ", " + addComp.city
					+ ", " + addComp.district + ", " + addComp.street + ", "
					+ addComp.streetNumber + "</br>手机号码:136888xxxx";
			$("#myModal .modal-body").html(add);
			showModal();
		});
	}

	function showModal() {//显示订单窗口
		$('#myModal').modal({
			backdrop : 'static',
			keyboard : false
		});
		$('#myModal').modal("show");
	}

	function confirmOrder() {//确认订单窗口并规划路径
		walking.search(bpoint, gcs_pt);
		$('#myModal').modal("hide");
	}

	function cancelOrder() {//没接到单,删除标记
		map.removeOverlay(marker2);
		$('#myModal').modal("hide");
	}

	function showOrderRecords() {//展示工单记录
		$('#orderRecordsModal').modal("show");
	}
	function showEngineerInfo() {//展示工程师信息
		$('#engineerInfo').modal("show");
	}
</script>
</html>
